<div class="content-below-toolbar">
	
	<div class="inner-content">
		
		<div class="breadcrumb">
			<a href="../../">Products</a>
			{if $product.parent}
				<a href="../{$product.parent.code}/">{$product.parent.code} - {$product.parent.title|escape:"html":"UTF-8"}</a>
				{$product.code}
			{else}
				{$product.code}
				{if $product.title}
				 	- <span id="breadcrumb_title">{$product.title|escape:"html":"UTF-8"}</span>
				{else}
					Add product
				{/if}
			{/if}
		</div>
		
		<p><label>Meta data</label></p>
		<table class="table" id="meta" style="width:auto">
			<tr>
				<th>Name</th>
				<th>Value</th>
				<th>Sort</th>
			</tr>
			{foreach from=$metas key=index item=meta}
			<tr>
				<td><input type="text" name="meta[{$index}][title]" value="{$meta.title}" style="width:10em;" /></td>
				<td><input type="text" name="meta[{$index}][value]" value="{$meta.value}" style="width:20em;" /></td>
				<td><input type="text" name="meta[{$index}][sort]" value="{$meta.sort}" style="width:5em;text-align:center" /></td>
			</tr>
			{foreachelse}
			<tr>
				<td><input type="text" name="meta[0][title]" value="" style="width:10em;" /></td>
				<td><input type="text" name="meta[0][value]" value="" style="width:20em;" /></td>
				<td><input type="text" name="meta[0][sort]" value="10" style="width:5em;text-align:center" /></td>
			</tr>
			{/foreach}
			<tr class="placeholder" style="display:none">
				<td><input type="text" name="meta[-][title]" value="" style="width:10em;" /></td>
				<td><input type="text" name="meta[-][value]" value="" style="width:20em;" /></td>
				<td><input type="text" name="meta[-][sort]" value="" style="width:5em;text-align:center" /></td>
			</tr>
		</table>
		<button id="add_meta">Add</button>
		<script type="text/javascript" charset="utf-8">
			{literal}
			$(function() {
				
				var meta_counter = 0;
				
				$('#add_meta').click(function(e) {
					e.preventDefault();
					var placeholder = $('#meta').find('.placeholder');
					var new_row = placeholder.clone().show().removeClass('placeholder');
					meta_counter++;
					new_row.find('input').each(function() {
						$(this).attr('name', $(this).attr('name').replace('-', 'a'+meta_counter));
					});
					new_row.insertBefore(placeholder);
				});
			});
			{/literal}
		</script>
	</div>
</div>